<template>
  <div class="app">
    <div class="search-bar">
      <el-form :model="searchData" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="发文单位" style="margin-bottom: 5px;">
              <el-input v-model="searchData.docUnit" size="medium" class="input" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="发文时间" style="margin-bottom: 5px;">
              <el-date-picker v-model="searchData.docCreatedDate" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" class="input"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="发文标题" style="margin-bottom: 5px;">
              <el-input v-model="searchData.docTitle" size="medium" class="input" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <div style="margin-top: 5px;">
              <el-button icon="el-icon-search" type="primary" size="small" @click="handleSearch">查询</el-button>
              <el-button icon="el-icon-refresh-left" size="small" @click="handleClear">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="ref2" :class="smallSize?'table-box':'table-box-small'">
      <tableComponent
        class="table"
        :height="height"
        :data="tableData || []"
        :columns="tableColumns"
        @change="tablePage"
        :table-option="tableOption"
        :page-option="searchData.page"
        :total="total"
      >
        <template scope="scope">
          <el-button @click="handleWatch(scope.scope.row)" type="text" size="mini">预览</el-button>
          <el-button @click="handleDownload(scope.scope.row)" type="text" size="mini">下载</el-button>
        </template>
      </tableComponent>
    </div>
    <el-dialog title="公文预览" :visible.sync="dialogVisible" width="50%" top="5vh">
      <div class="view">
        <pdf ref="pdf" :src="pdfUrl"></pdf>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableComponent from '@/components/Table/table'
import { tableColumns } from "./index.js"
import { queryOa, downloadOa } from '@/api/modules/taskCenter.js'
import pdf from 'vue-pdf'
export default {
  components: {
    tableComponent,
    pdf
  },
  watch: {
    screenWidth: {
      handler(val) {
        this.windowWidth(val)
      },
      immediate: true
    }
  },
  data() {
    return {
      searchData: {
        isApproved: '',
        docUnit: '',
        docCreatedDate: '',
        docTitle: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      height: null,
      tableColumns,
      tableData: [],
      tableOption: {
        isShowOperate: true,
        operateWidth: '100px'
      },
      total: 0,
      dialogVisible: false,
      pdfUrl: '',
      smallSize: true,
      screenWidth: document.documentElement.clientWidth
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = this.$refs.ref2.offsetHeight
    })
    const that = this
    window.onresize = () => {
      that.height = that.$refs.ref2.offsetHeight
      const val = document.documentElement.clientWidth
      that.screenWidth = val
    }
    this.initData(this.searchData)
  },
  destroyed(){
    window.onresize = null
  },
  methods: {
    initData(params) {
      queryOa(params).then(res => {
        if (res.data.code === '200') {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          return false
        }
      })
    },
    // 查询
    handleSearch() {
      this.initData(this.searchData)
    },
    // 分页
    tablePage(val) {
      this.searchData.page = val
      this.initData(this.searchData)
    },
    // 重置
    handleClear() {
      this.searchData = {}
    },
    handleSelect() {},
    handleWatch(row) {
      this.dialogVisible = true
      const params = {
        docId: row.oaDocId,
        fileName: row.fileName
      }
      downloadOa(params).then(res => {
        const url = res.data.data.cosUrl
        this.pdfUrl = url
      })
    },
    handleDownload(row) {
      const params = {
        docId: row.oaDocId,
        fileName: row.fileName
      }
      downloadOa(params).then(res => {
        const url = res.data.data.cosUrl
        let a = document.createElement('a')
        a.href = url
        a.click()
      })
    },
    windowWidth(val) {
      if (val < 992) {
        this.smallSize = false
      } else {
        this.smallSize = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    height: 100%;
    .search-bar {
      width: calc(100% - 60px);
      background-color: #ffffff;
      margin-bottom: 10px;
      padding: 10px 30px;
      .input {
        width: 100%;
      }
    }
    .table-box {
      width: 100%;
      height: calc(100vh - 210px);
      .table {
        height: 100%;
      }
    }
    .table-box-small {
      width: 100%;
      height: calc(100vh - 250px);
      .table {
        height: 100%;
      }
    }
    .view {
      height: 60vh;
      overflow: auto;
    }
  }
</style>
